<script setup>

// 创建响应式变量存储用户名
import {ref} from "vue";

let name = ref('')
import axios from "axios";

let getWords = async () => {
  /*
    发送get请求的方法
    axios.get(url)
    axios.get(url,{请求的其他信息})
    axios.get(url，{params：{键值对参数},header:{设置一些特殊的请求头}})
    return axios.get(”/api/hello“)
    */
  try {
    return await axios.post(
        "/api/axiosServlet",
        {
          params: {
            format: 'json',
            username: 'zhangsan',
            password: '123456'
          },
          headers: {
            'Accept': 'application/json, text/plain, text/html,*/*'
          }
        }
    )
  } catch (e) {
    console.log("错误的信息", e)
  }
}
// 添加async关键字，使函数可以使用await
let getMessage = async () => {
  try {
    let {data} = await getWords()
    // 将后端返回的name赋值给响应式变量
    // 注意：这里的data.name需要根据后端实际返回的字段名调整
    name.value = data.name
  } catch (error) {
    console.error('获取数据失败:', error)
    name.value = '获取失败'
  }
}
</script>

<template>
  <div>
    <h1>获取后端数据</h1>
    <p>用户名：{{ name }}</p>
    <button @click="getMessage">获取后端数据</button>
  </div>
</template>

<style scoped>

</style>